﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>Robot Karel</title>
    <link type="text/css" rel="stylesheet" href="./Css/jquery-ui-1.10.3.custom.css" />
    <link type="text/css" rel="stylesheet" href="./Css/global.css" />
    <link type="text/css" rel="stylesheet" href="./Css/help.css" />
    <script type="text/javascript" src="./Scripts/jquery-2.0.3.js"></script>
    <script type="text/javascript" src="./Scripts/jquery-2.0.3.js"></script>
    <script type="text/javascript" src="./Scripts/jquery-ui-1.10.3.js"></script>
    <script type="text/javascript" src="./Scripts/jquery.ui-contextmenu.js"></script>
    <script type="text/javascript" src="./Scripts/jquery.browser.js"></script>
    <script type="text/javascript" src="./Scripts/extensions.js"></script>
    <script type="text/javascript" src="./Scripts/shortcut.js"></script>
    <script type="text/javascript" src="./Scripts/require.js" data-main="./Scripts/App.js"></script>
</head>
<body>
    <div id="idLoading" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: #817865; color: white; display: table; z-index: 1000">
        <div style="vertical-align: middle; display: table-cell; text-align: center;">
            <h1><span style="font-weight: bold; font-size: 2em; text-shadow: 5px 5px 5px #333">Načítám aplikaci...</span></h1>
        </div>
    </div>

    <div id="frame">
        <div id="leftPane">            
            <div id="idCity">
                <canvas id="idCanvas">Not support for canvas</canvas>
            </div>
            <div id="idKarelToolbar" class="ui-widget-header ui-corner-all">
                <button id="idPauseCommand">Pauza</button>
                <button id="idContinueCommand">Pokračuj</button>
                <button id="idStopCommand">Ukonči příkaz</button>
                <div>Rychlost Karla:</div>
                <div id="idSpeed"></div>
            </div>
            <div id="idCityToolbar" class="ui-widget-header ui-corner-all">
                <div id="idCitySwitch">
                    <form>
                        <input type="radio" id="radio1" name="radio" data-type="Karel" ><label for="radio1">Karel</label>
                        <input type="radio" id="radio2" name="radio" data-type="Wall" ><label for="radio2">Zeď</label>
                        <input type="radio" id="radio3" name="radio" data-type="Put" ><label for="radio3">Polož</label>
                        <input type="radio" id="radio4" name="radio" data-type="Pick" ><label for="radio4">Zvedni</label>
                    </form>
                </div>
                <div>
                    <button id="idClearCityCommand">Vyčisti město</button>
                    <button id="idCollectMarksCommand">Posbírej značky</button>
                    <button id="idLoadCityCommand">Nahrát město</button>
                    <button id="idSaveCityCommand">Uložit město</button>
                </div>
            </div>
        </div>
        <div id="rightPane">
            <div id="idDictionaryContainer">
                <div id="idDictionary" class="ui-dialog-content ui-widget-content ui-corner-all ">
                    <ol id="idCommandList"></ol>
                </div>
                <div id="idBottomDictionaryToolbar" class="ui-widget-header ui-corner-all">
                    <button id="idLoadDictionaryCommand">Nahrát slovník</button>
                    <button id="idSaveDictionaryCommand">Uložit slovník</button>
                    <button id="idClearDictionaryCommand">Vymazat slovník</button>
                    <button id="idHelpCommand">Nápověda</button>
                    <button id="idAuthorsCommand">O Autorech</button>
                </div>
            </div>
            <div id="idCommandLine" class="ui-widget-content ui-corner-all">
                <table style="width: 100%">
                    <tr>
                        <td style="width: 130px;">
                            <span style="font-weight: bold">Příkazová řádka:</span>
                        </td>
                        <td style="max-width: 2000px;">
                            <input id="idCommandLineInput" type="text" style="width: 100%" />
                        </td>
                    </tr>
                </table>
            </div>
            <div id="idEditor">
                <div id="idTopEditorToolbar" class="ui-widget-header ui-corner-all">
                    <button id="idNewCommand">Nový příkaz</button>
                    <button id="idEditCommand">Upravit</button>
                </div>
                <div id="idEditorWrapper">
                    <div id="idEditViewSwitch">
                        <div id="idEditorViewPane" class="ui-corner-all">
                            <div id="idCommandPane">
                                <pre></pre>
                            </div>
                            <div id="idDiagramPane">
                            </div>
                        </div>
                        <div id="idEditorEditPane" >
                            <textarea id="idEditorInput"></textarea>
                        </div>
                    </div>
                </div>
                <div id="idBottomEditorToolbar" class="ui-widget-header ui-corner-all">
                    <button id="idSaveCommand">Uložit</button>
                    <button id="idCancelCommand">Storno</button>
                </div>
            </div>
        </div>
    </div>
    <div id="idMessageBox" title="">
        <p>
            <span id="idMessage"></span>
        </p>
    </div>
    <div id="idDictionaryDownload" title="Slovník ke stažení">
        <p>
            Nyní je Karlův slovník připraven ke stažení. Slovník stáhnete do svého počítače stiskem na tlačítko "Uložit slovník".
        </p>
        <p style="text-align: right">
            <button id="idDownloadDictionaryCommand">Uložit slovník</button>
        </p>
    </div>
    <div id="idDictionaryUpload" title="Načtení slovníku">
        <p>Prosím, klepněte na tlačítko "Vybrat soubor" a najděte textový soubor, který obsahuje příkazy robota Karla, které chcete nahrát do jeho slovníku.</p>
        <p>
            <div class="custom-file">
                <span class="text">Není vybrán žádný soubor</span>
                <button id="idChooseFile" class="button">Vybrat soubor</button>
                <input type="file" id="file" />
            </div>
        </p>
    </div>
    <div id="idCityDownload" title="Konfigurace města ke stažení">
        <p>
            Nyní je konfigurace Karlova města připravena ke stažení. Konfiguraci města stáhnete do svého počítače stiskem na tlačítko "Uložit město".
        </p>
        <p style="text-align: right">
            <button id="idDownloadCityCommand">Uložit město</button>
        </p>
    </div>
    <div id="idCityUpload" title="Načtení konfigurace města">
        <p>Prosím, klepněte na tlačítko "Vybrat soubor" a najděte textový soubor, který obsahuje konfiguraci města robota Karla, kterou chcete nahrát.</p>
        <p>
            <div class="custom-file">
                <span class="text">Není vybrán žádný soubor</span>
                <button id="idChooseCityFile" class="button">Vybrat soubor</button>
                <input type="file" id="cityFile" />
            </div>
        </p>
    </div>
    <div id="idHelp" title="Nápověda">
        <div class="helpContainer">
            <div class="summary">
                <ol id="idChapterList"></ol>
            </div>
            <div  class="content">
                <div id="idChapterContent">

                </div>
            </div>
        </div>
    </div>
    <div id="idAuthors" title="O Autorech">
        <p>
            Program Robot Karel pro výuku programování Vám přínáší vývojový team <b>Ignitron</b>. Přejeme hodně zábavy. Pokud máte 
            připomínky k programu a chcete nás kontaktovat, neváhejte na adrese <a href="http://karel.codeplex.com" target="_blank">http://karel.codeplex.com</a>.
            Děkujeme.            
        </p>
    </div>
</body>
</html>
